import {
  trigger,
  state,
  style,
  animate,
  transition
} from '@angular/animations';
// 动画时间线
var time = '500ms'
var styles = {
  ease: time + ' ease ',
  linear: time + ' linear ',
  easeIn: time + ' ease-in',
  easeOut: time + ' ease-out',
  stepStart: time + ' step-start',
  stepEnd: time + ' step-end',
  easeInOut: time + ' ease-in-out',
  faseOutSlowIn: time + ' cubic-bezier(0.4, 0, 0.2, 1)',
  inOutBack: time + ' cubic-bezier(0.68, -0.55, 0.27, 1.55)',
  inOutBack2: time + ' cubic-bezier(0, -0.55, 0.27, 1.55)',
  inOutBack3: time + ' cubic-bezier(0, -0.55, 0.27, 1.20)',
  inOutCubic: time + ' cubic-bezier(0.65, 0.05, 0.36, 1)',
  inOutQuadratic: time + ' cubic-bezier(0.46, 0.03, 0.52, 0.96)',
  inOutSine: time + ' cubic-bezier(0.45, 0.05, 0.55, 0.95)'
}
// 动画配置
var opts = {
  fadeIn: [
    style({ opacity: 0 }),
    animate(styles.faseOutSlowIn, style({ opacity: 1 }))
  ],
  fadeOut: [
    style({ opacity: 1 }),
    animate(styles.inOutBack, style({ opacity: 0 }))
  ],
  shrink: [
    style({ height: '*' }),
    animate(styles.easeOut, style({ height: 0 }))
  ],
  stretch: [
    style({ height: '0' }),
    animate(styles.inOutBack2, style({ height: '*' }))
  ],
  flyIn: [
    style({ transform: 'translateX(-100%)' }),
    animate(styles.inOutBack, style({ transform: '*' }))
  ],
  flyOut: [
    style({ transform: '*' }),
    animate(styles.inOutBack, style({ transform: 'translateX(-100%)' }))
  ],
  downIn: [
    style({ transform: 'translateY(-100%)' }),
    animate(styles.inOutBack3, style({ transform: '*' }))
  ],
  zoomIn: [
    style({ transform: 'scale(.5)', opacity: 0 }),
    animate(styles.inOutBack, style({ transform: '*', opacity: 1 }))
  ],
  zoomOut: [
    style({ transform: '*' }),
    animate(styles.inOutBack, style({ transform: 'scale(.5)' }))
  ]
}
// 导出动画时间线定义,供自定义动画的时候使用
export const animStyle = styles;
// 导出动画
export const fadeIn = [trigger('fadeIn', [transition('void => *', opts.fadeIn)])];
export const fadeOut = [trigger('fadeOut', [transition('* => void', opts.fadeOut)])];
export const stretch = [trigger('stretch', [transition('void => *', opts.stretch)])];
export const shrink = [trigger('shrink', [transition('* => void', opts.shrink)])];
export const flyIn = [trigger('flyIn', [transition('void => *', opts.flyIn)])];
export const flyOut = [trigger('flyOut', [transition('* => void', opts.flyOut)])];
export const downIn = [trigger('downIn', [transition('void => *', opts.downIn)])];
export const zoomIn = [trigger('zoomIn', [transition('void => *', opts.zoomIn)])];
export const zoomOut = [trigger('zoomOut', [transition('* => void', opts.zoomOut)])];